<!--
 * @Author: houmin 745762351@qq.com
 * @Date: 2023-09-11 09:50:52
 * @LastEditors: houmin 745762351@qq.com
 * @LastEditTime: 2023-09-11 14:07:17
 * @FilePath: \tch-h5\src\views\hotpot-detail\hotpotDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Header title="店铺详情" :back="true" />
  <div class="hotpot-detail" :id="teleportId">
    <template v-if="!loading">
      <div class="detail-img">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @click="handelswip">
          <van-swipe-item v-for="item in hotpotInfolist.scenicsInfo.coverImageList" :key="item">
            <van-image class="img" :src="`${fileUrl}/${item}`" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </template>
    <van-skeleton v-else>
      <template #template>
        <div :style="{ display: 'flex', width: '100vw' }">
          <van-skeleton-image :style="{ width: '100%', height: '25rem' }" />
        </div>
      </template>
    </van-skeleton>
    <!-- 引入产品详情组件 -->
    <ProductDetails :data="hotpotInfolist.scenicsInfo" :time="hotpotInfolist.scenicSpotTimeSlots" :loading="loading">
      <!-- 列表 -->
      <div class="discount_coupon_box">
        <template v-if="!loading">
          <DiscountCoupon
            v-for="(item, index) in hotpotInfolist.scenicSpotTicket"
            :key="index"
            :discountInfo="item"
            :hotpotId="hotpotId"
            :scenicAreaName="hotpotInfolist.scenicsInfo.scenicAreaName"
            :teleportId="teleportId"
          />
        </template>
        <van-skeleton v-else>
          <template #template>
            <div :style="{ width: '100%' }">
              <template v-for="i in 2" :key="i">
                <div :style="{ display: 'flex', flexDirection: 'column', width: '100%', marginBottom: '2rem' }">
                  <div :style="{ flex: 1}">
                    <van-skeleton-paragraph row-width="30%" />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                  </div>
                </div>
              </template>
            </div>
          </template>
        </van-skeleton>
      </div>
      <!-- 简介 -->
      <template #desc>
        <div class="desc_content">
          <div style="color: #666666; font-size: 1.6rem;" v-html="addWidthToImages(hotpotInfolist.scenicsInfo.basicInformation)" />
          <div class="opening_hours_header">营业时间</div>
          <div v-if="hotpotInfolist.scenicSpotTimeSlots.length" class="opening_hours_content">
            <div class="time_list" v-for="item in hotpotInfolist.scenicSpotTimeSlots" :key="item">
              <div>
                {{ `${item.timeHour[0]} - ${item.timeHour[1]}营业时间：` }}
              </div>
              <div>
                {{ item.timeSlot[0] }}
              </div>
            </div>
          </div>
          <div class="time_list" v-else>24小时营业</div>
        </div>
      </template>
    </ProductDetails>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Header from "@/components/header/Header.vue";
import { showImagePreview } from "vant";
import banner from "../../assets/images/index/banner.jpg";
import DiscountCoupon from "./components/DiscountCoupon.vue"
import api from "@/api/index.js"
import {onBeforeRouteLeave, useRoute} from "vue-router"
import { userStore } from "@/stores/user.js"
import {determineNeedSaveKeepALive} from "@/utils/routerKeepALive.js"
import { addWidthToImages } from "@/utils/index.js"
const user = userStore()
const route = useRoute();
const hotpotId = route.params.id
const fileUrl = import.meta.env.VITE_FILE_URL
const hotpotInfolist = ref([])

defineOptions({
  name: 'cateringDetail',
})

onBeforeRouteLeave((to, from) => {
  const needSaveRoute = ['scenicOrderDetail']
  determineNeedSaveKeepALive(to, from, needSaveRoute, 'cateringDetail')
})

const teleportId = 'hotpot-detail'

const loading = ref(false)
// 更具火锅id获取商品详情
const getthopotDetailInfo = () => {
  loading.value = true
  const params = {
    id: hotpotId,
    lon: user.position?.coords?.longitude,
    lat: user.position?.coords?.latitude
  };
  api.gethotpotpotsave(params).then((res) => {
    if (res.code == 200) {
      hotpotInfolist.value = res.data
    }
  }).finally(() => {
    loading.value = false
  })
};
getthopotDetailInfo()

// 图片预览
const handelswip = (e) => {
  showImagePreview([e.target.src]);
};
</script>

<style lang="scss" scoped>
.hotpot-detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  .desc_content{
    overflow-y: auto;
    padding-bottom: 1rem;
    line-height: 1.5;
    .opening_hours_header{
      margin-top: 1.5rem;
      font-size: 1.6rem;
      font-weight: bold;
      color: #333333;
      margin-bottom: .5rem;
    }
    .opening_hours_content{
      font-size: 1.4rem;
      color: #666666;
      line-height: 2.2rem;
      .time_list{
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
}

.detail-img {
  width: 100%;
  height: 25rem;
}
.discount_coupon_box{
  margin-bottom: 3rem;
}

.img {
  width: 100%;
  height: 39rem;
  display: flex;
  align-content: center;
  justify-content: center;
}

.htmlcont> p{
  color: #666666 !important;
    }
</style>